<template>
	<view v-if="tabbar.length" class="container">
		<!-- 商品分类tab -->
		<view class="sharp-tabs">
			<scroll-view scroll-x="true" scroll-left="true">
					<view class="sharp-tabs--container dis-flex">
						<button v-for="(item,index) in tabbar " :key="index" class="btn-normal" @tap="onToggleTab(index)">
							<view class="tabs-item dis-flex flex-dir-column flex-x-center flex-y-center" :class="[curTabIndex == index ? 'active' : '']">
								<block v-if="item.status == StateEnum.ACTIVE_STATE_NOTICE.value">
									<view class="item-title">{{ item.status_text }}</view>
								</block>
								<block v-else>
									<view class="item-time">{{ item.active_time }}</view>
									<view class="item-status">{{ item.status_text }}</view>
								</block>
							</view>
						</button>
					</view>
				<view class="sharp-tabs--empty"></view>
			</scroll-view>
		</view>
		<!-- 秒杀活动 -->
		<view class="sharp-active dis-flex flex-dir-column flex-y-center">
			<!-- 活动状态 -->
			<view class="active-status">
				<text class="active-status--icon iconfont icon-artboard"></text>
				<text class="active-status--time" v-if="tabbar[curTabIndex].status != StateEnum.ACTIVE_STATE_NOTICE.value">{{ tabbar[curTabIndex].active_time }}</text>
				<text class="active-status--text">{{ tabbar[curTabIndex].status_text2 }}</text>
			</view>
			<!-- 倒计时 -->
			<view class="active--count-down dis-flex flex-y-center">
				<view class="clock-text">
					<text>{{ tabbar[curTabIndex].status == StateEnum.ACTIVE_STATE_BEGIN.value ? '距结束' : '距开始' }}</text>
				</view>
				<view class="clock dis-flex">
					<view class="clock-time">
						<text>{{ countDownList[0].dynamic.hou }}</text>
					</view>
					<view class="clock-symbol">
						<text>:</text>
					</view>
					<view class="clock-time">
						<text>{{ countDownList[0].dynamic.min }}</text>
					</view>
					<view class="clock-symbol">
						<text>:</text>
					</view>
					<view class="clock-time">
						<text>{{ countDownList[0].dynamic.sec }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="bargain-hall">
			<!-- 商品列表 -->
			<view class="goods-item" v-for="(item,indexss) in goodsList.data" :key="indexss">
					<button form-type="submit" class="btn-normal" @tap="onTargetActive(item.sharp_goods_id)">
						<view class="goods-item--container dis-flex">
							<!-- 商品图片 -->
							<view class="goods-image">
								<image :src="item.goods_image "></image>
							</view>
							<view class="goods-info">
								<!-- 商品名称 -->
								<view class="goods-name">
									<text class="twolist-hidden">{{ item.goods_name }}</text>
								</view>
								<!-- 秒杀进度条 -->
								<view class="sharp-progress dis-flex flex-y-center">
									<view class="yoo-progress">
										<view class="yoo-progress--portion" :style="[{'width' : item.progress+'%'}]">
										<!-- <view class="yoo-progress--portion" style="width: {{ item.progress }}%;" "> -->
										</view>
										<text class="yoo-progress--text">{{ item.progress }}%</text>
									</view>
									<view class="sharp-sales">已抢{{ item.sales_actual }}件</view>
								</view>
								<!-- 秒杀活动价格 -->
								<view class="sharp-price dis-flex flex-y-end">
									<view class="seckill-price">
										<text class="f-24">￥</text>
										<text class="money">{{ item.goods_sku.seckill_price }}</text>
									</view>
									<view class="original-price">
										<text class="f-24">￥</text>
										<text class="money">{{ item.goods_sku.original_price }}</text>
									</view>
								</view>
								<!-- 操作按钮 -->
								<view class="opt-touch">
									<view class="touch-btn">
										<text>{{ tabbar[curTabIndex].status == StateEnum.ACTIVE_STATE_BEGIN.value ? '马上抢' : '查看商品' }}</text>
									</view>
								</view>
							</view>
						</view>
					</button>
			</view>
			<view v-if="noMore " class="no-more f-28">亲, 没有更多了</view>
			<!-- 无数据提供的页面 -->
			<view v-if="!isLoading && !goodsList.data.length ">
				<view class="yoshop-notcont">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无秒杀商品哦</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// const App = getApp();

	// 工具类
	import util from '../../../utils/util.js';
	// 倒计时插件
	import CountDown from '../../../utils/countdown.js';
	// // 枚举类：秒杀会场活动状态
	import StateEnum from '../../../utils/enum/sharp/ActiveStatus.js';

	export default {
		computed: {

		},
		data() {
			return {
				// 当前tab索引
				curTabIndex: 0,
				noMore: false, // 没有更多数据
				isLoading: true, // 是否正在加载中
				page: 1, // 当前页码

				StateEnum, // 枚举类：秒杀会场活动状态

				// 倒计时
				countDownList: [],

				// 秒杀活动场次
				tabbar: [],

				// 秒杀商品列表
				goodsList: [],
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let _this = this;
			// 获取列表数据
			_this.getApiData();
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

		},
		methods: {
			/**
			 * 获取列表数据
			 */
			getApiData() {
				let _this = this;
				_this._get('sharp.index/index', {}, (result) => {
					_this.setData(result.data);
					// 初始化倒计时组件
					_this._initCountDownData();
				});
			},

			/**
			 * 初始化倒计时组件
			 */
			_initCountDownData(data) {
				let _this = this,
					curTabbar = _this.tabbar[_this.curTabIndex];
					
				console.log(curTabbar);
				// 记录倒计时的时间
				
				_this.setData({
					'countDownList.0':{
						date: curTabbar.count_down_time,
					}
				});
				// 执行倒计时
				CountDown.onSetTimeList(_this, 'countDownList');
			},

			/**
			 * 切换tabbar
			 */
			onToggleTab(e) {
				let _this = this;
				// 保存formid
				// 设置当前tabbar索引，并重置数据
				_this.setData({
					curTabIndex: e,
					goodsList: [],
					page: 1,
					isLoading: true,
					noMore: false,
				});
				// 获取列表数据
				_this.getGoodsList();
				// 初始化倒计时组件
				_this._initCountDownData();
			},

			/**
			 * 跳转到砍价商品详情
			 */
			onTargetActive(e) {
				let _this = this,
					curTabbar = _this.tabbar[_this.curTabIndex];
				let query = util.urlEncode({
					active_time_id: curTabbar.active_time_id,
					sharp_goods_id: e,
				});
				console.log(query);
				uni.navigateTo({
					url: '../goods/index?${query}',
				})
			},

			/**
			 * 下拉到底部加载下一页
			 */
			onReachBottom() {
				let _this = this,
					listData = _this.goodsList;
				// 已经是最后一页
				if (_this.page >= listData.last_page) {
					_this.setData({
						noMore: true
					});
					return false;
				}
				// 加载下一页列表
				_this.setData({
					page: ++_this.page
				});
				_this.getGoodsList(true);
			},

			/**
			 * 获取列表数据
			 */
			getGoodsList(isNextPage) {
				let _this = this,
					curTabbar = _this.tabbar[_this.curTabIndex];;
				_this._get('sharp.goods/lists', {
					page: _this.page || 1,
					active_time_id: curTabbar.active_time_id
				}, (result) => {
					let resList = result.data.list,
						dataList = _this.goodsList;
					if (isNextPage == true) {
						_this.setData({
							'goodsList.data': dataList.data.concat(resList.data),
							isLoading: false,
						});
					} else {
						_this.setData({
							goodsList: resList,
							isLoading: false,
						});
					}
				});
			},

			/**
			 * 用户点击右上角分享
			 */
			onShareAppMessage() {
				let _this = this;
				// 构建页面参数
				let params = _this.getShareUrlParams();
				return {
					title: '整点秒杀',
					path: '/pages/sharp/index/index?${params}'
				};
			},

		}
	}
</script>

<style>
	page,
	.container {
		background: #efeff4;
	}

	/*隐藏滚动条*/

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.sharp-tabs {
		background: #fff;
	}

	.sharp-tabs .sharp-tabs--container {
		background: #30353c;
	}

	.sharp-tabs .sharp-tabs--empty {
		padding-bottom: 30upx;
	}

	.sharp-tabs .tabs-item {
		position: relative;
		min-width: 170upx;
		height: 110upx;
		background: #30353c;
		color: #fff;
		padding: 15upx 45upx;
		text-align: center;
		box-sizing: border-box;
		white-space: nowrap;
	}

	.sharp-tabs .tabs-item .item-time {
		font-size: 32upx;
	}

	.sharp-tabs .tabs-item .item-status {
		font-size: 24upx;
	}

	.sharp-tabs .tabs-item .item-title {
		font-size: 30upx;
	}

	.sharp-tabs .tabs-item.active {
		background: #fd4a5f;
	}

	.sharp-tabs .tabs-item.active::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 999;
		bottom: -15upx;
		left: 50%;
		margin-left: -12upx;
		width: 0;
		height: 0;
		border: 20upx solid #fd4a5f;
		border-left-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-bottom-width: 0;
	}

	/* 活动状态 */

	.sharp-active {
		background: #fff;
		padding-bottom: 30upx;
	}

	.sharp-active .active-status {
		font-size: 32upx;
		color: #fd4a5f;
		margin-bottom: 15upx;
	}

	.sharp-active .active-status .active-status--icon {
		margin-right: 10upx;
	}

	.sharp-active .active-status .active-status--time {
		margin-right: 10upx;
	}

	/* 倒计时 */

	.active--count-down {
		font-size: 26upx;
		height: 40upx;
	}

	.active--count-down .clock-text {
		margin-right: 10upx;
	}

	.active--count-down .clock-time {
		background: #252525;
		color: #fff;
		padding: 0 8upx;
		line-height: 40upx;
		border-radius: 8upx;
	}

	.active--count-down .clock-symbol {
		padding: 0 8upx;
	}

	/* 商品列表 */

	.bargain-hall {
		padding-top: 20upx;
		/* background: #fff; */
	}

	.goods-item {
		background: #fff;
		padding: 30upx 16upx;
		border-bottom: 1upx solid #e7e7e7;
	}

	.goods-item .goods-image image {
		display: block;
		width: 220upx;
		height: 220upx;
	}

	.goods-item .goods-info {
		width: 498upx;
		padding-top: 8upx;
		margin-left: 15upx;
		position: relative;
	}

	.goods-item .goods-info .goods-name {
		font-size: 28upx;
		min-height: 76upx;
		margin-bottom: 20upx;
	}

	/* 秒杀进度条 */

	.yoo-progress {
		position: relative;
		width: 70%;
		height: 14px;
		border-radius: 6px;
		background: rgb(248, 182, 182);
	}

	.yoo-progress--portion {
		width: 0%;
		height: 100%;
		border-radius: 6px;
		background: linear-gradient(to right, rgb(247, 102, 83), #fd4a5f);
	}

	.yoo-progress--text {
		color: #fff;
		font-size: 24upx;
		line-height: 1.6;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.sharp-sales {
		margin-left: 30upx;
		font-size: 24upx;
		color: #fd4a5f;
		white-space: nowrap;
	}

	/* 秒杀价格 */

	.sharp-price {
		margin-top: 40upx;
		line-height: 1;
	}

	.seckill-price {
		font-size: 32upx;
		color: #fd4a5f;
		margin-bottom: -2upx;
	}

	.original-price {
		margin-left: 5upx;
		font-size: 24upx;
		color: #818181;
		text-decoration: line-through;
	}

	/* 立即参加按钮 */

	.opt-touch {
		position: absolute;
		bottom: 0;
		right: 10upx;
	}

	.touch-btn {
		color: #fff;
		font-size: 26upx;
		background: #fd4a5f;
		border-radius: 30upx;
		padding: 10upx 30upx;
	}
</style>
